<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>jQuery手机触屏滑动导航代码</title>
    <link rel="stylesheet" href="../css/common.min.css">
    <!--<link rel="stylesheet" href="../scripts/plugins/miniMobile/miniMobile.css">-->
    <link rel="stylesheet" href="../scripts/plugins/h5_aside/h5_aside.css">
    <link rel="stylesheet" href="../scripts/plugins/h5_port_select/h5_port_select.css">
</head>
<body>
<div>
    <span class="j_select">请选择港口</span>
</div>

<!--<div class="port_select" style="display: none;">-->
<!--<div class="port_search">-->
<!--<div class="port_search_wrap">-->
<!--<svg class="icon svg-icon" aria-hidden="true">-->
<!--<use xlink:href="#iconicon-"></use>-->
<!--</svg>-->
<!--<input placeholder="请输入港口名称"/>-->
<!--</div>-->
<!--</div>-->
<!--<div class="port_right">-->
<!--<span>hot</span>-->
<!--<span>A</span>-->
<!--<span>B</span>-->
<!--<span>C</span>-->
<!--<span>D</span>-->
<!--<span>E</span>-->
<!--<span>F</span>-->
<!--<span>G</span>-->
<!--<span>H</span>-->
<!--<span>I</span>-->
<!--<span>J</span>-->
<!--<span>K</span>-->
<!--<span>L</span>-->
<!--<span>M</span>-->
<!--<span>N</span>-->
<!--<span>O</span>-->
<!--<span>P</span>-->
<!--<span>Q</span>-->
<!--<span>R</span>-->
<!--<span>S</span>-->
<!--<span>T</span>-->
<!--<span>U</span>-->
<!--<span>V</span>-->
<!--<span>W</span>-->
<!--<span>X</span>-->
<!--<span>Y</span>-->
<!--<span>Z</span>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>历史选择港口</span>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div>南沙</div>-->
<!--<div>南沙</div>-->
<!--<div>南沙</div>-->
<!--<div>新港</div>-->
<!--<div>新港</div>-->
<!--<div>新港</div>-->
<!--<div>厦门</div>-->
<!--<div>厦门</div>-->
<!--<div>厦门</div>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>热门港口</span>-->
<!--</div>-->
<!--<div class="content">-->
<!--<div>安吉</div>-->
<!--<div>安庆</div>-->
<!--<div>澳头</div>-->
<!--<div>新港</div>-->
<!--<div>新港</div>-->
<!--<div>新港</div>-->
<!--<div>厦门</div>-->
<!--<div>厦门</div>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>A</span>-->
<!--</div>-->
<!--<div class="port_item">-->
<!--<div>安吉</div>-->
<!--<div>安庆</div>-->
<!--<div>澳头</div>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>B</span>-->
<!--</div>-->
<!--<div class="port_item">-->
<!--<div>博罗</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--<div>滨州</div>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>C</span>-->
<!--</div>-->
<!--<div class="port_item">-->
<!--<div>重庆</div>-->
<!--<div>重庆</div>-->
<!--<div>重庆</div>-->
<!--<div>重庆</div>-->
<!--<div>重庆</div>-->
<!--<div>重庆</div>-->
<!--<div>重庆</div>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>D</span>-->
<!--</div>-->
<!--<div class="port_item">-->
<!--<div>丹东</div>-->
<!--<div>丹东</div>-->
<!--<div>丹东</div>-->
<!--<div>丹东</div>-->
<!--<div>丹东</div>-->
<!--<div>丹东</div>-->
<!--</div>-->
<!--<div class="title">-->
<!--<span>E</span>-->
<!--</div>-->
<!--<div class="port_item">-->
<!--<div>恩平</div>-->
<!--<div>恩平</div>-->
<!--<div>恩平</div>-->
<!--<div>恩平</div>-->
<!--</div>-->
<!--</div>-->
<aside class="ui-aside aside port_aside"></aside>

<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../iconfont/iconfont.js"></script>
<!--<script type="text/javascript" src="../scripts/plugins/miniMobile/miniMobile.js"></script>-->
<script type="text/javascript" src="../scripts/plugins/h5_aside/h5_aside.js"></script>
<script type="text/javascript" src="../scripts/plugins/h5_port_select/h5_port_select.js"></script>

<script type="text/javascript">
    $(function () {

        let options = {};
        let source = {};
        let history = [{
            id: "1",
            text: "南沙",
        }, {
            id: "1",
            text: "南沙",
        }];
        let hot = [{
            id: "1",
            text: "恩平",
        }, {
            id: "1",
            text: "恩平",
        }, {
            id: "1",
            text: "恩平",
        }, {
            id: "1",
            text: "恩平",
        }, {
            id: "1",
            text: "恩平",
        }, {
            id: "1",
            text: "恩平",
        }];
        let items = [{
            id: "A",
            list: [{
                id: "1",
                text: "安吉",
            }, {
                id: "1",
                text: "安庆",
            }, {
                id: "1",
                text: "澳头",
            }],
        }, {
            id: "B",
            list: [{
                id: "1",
                text: "博罗",
            }, {
                id: "1",
                text: "滨州",
            }],
        }, {
            id: "C",
            list: [{
                id: "1",
                text: "重庆",
            }],
        }, {
            id: "D",
            list: [{
                id: "1",
                text: "丹东",
            }],
        }, {
            id: "E",
            list: [{
                id: "1",
                text: "恩平",
            }],
        }];

        options.source = function (process) {
            let post = {};
            process(source);

            // $.ajax({
            //     url: "",
            //     type: "post",
            //     data: JSON.stringify(post),
            //     contentType: "application/json; charset=utf-8",
            //     async: true,
            //     success: function (result) {
            //         process(result);
            //     },
            //     error: function (error) {
            //         console.log(error);
            //     }
            // });
        };

        source.history = history;
        source.hot = hot;
        source.items = items;
        // options.source = source;
        options.class = "port_aside";
        $(".j_select").portSelect(options);
    });
</script>
</body>
</html>
